<template>
    <div class="page-form page-act-add">
      <Form  ref="formValidate" :model="formItem" :rules="ruleValidate" style="width: 500px" :label-width="120">
          <FormItem prop="name" label="姓名：">
              <Input v-model="formItem.name" placeholder="请输入员工姓名"></Input>
          </FormItem>
          <FormItem prop="num" label="工号：">
              <Input v-model="formItem.num" placeholder="请输入员工工号"></Input>
          </FormItem>         
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>
    </div>
</template>
<style scoped lang="less">
.page-form {
  overflow: auto;
  box-sizing: border-box;
  padding: 15px 0 0 0;
}
</style>
<script>
export default {
  data() {
    return {
      id: "",
      formItem: {
        name: "",
        num:""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "员工姓名不能为空~",
            trigger: "blur"
          }
        ],
        num: [
          {
            required: true,
            message: "员工工号不能为空~",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    var self = this;
    var id = this.$route.query.id;
    if (id != undefined) {
      self.id = id;
      this.init(id);
    }
  },
  mounted() {},
  methods: {
    init(id) {
      var self = this;
      // 定义请求
      var req = self.Axios.get(self.Interface.userDetails + id);

      // 处理请求结果
      req.then(res => {
        var data = res.data;
        if (data.success) {
          self.formItem = {
            name: data.data.name,
            num: data.data.num.toUpperCase()
          };
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    handleSubmit(name) {
      var self = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          var data = {
            name: self.formItem.name,
            num: self.formItem.num.toUpperCase()
          };
          if (self.id) {
            data.id = self.id;
          }
          // 定义请求
          var req = self.Axios.post(self.Interface.userSave, data);

          // 处理请求结果
          req.then(res => {
            var data = res.data;
            if (data.success) {
              if (self.id) {
                this.$Message.success("更新成功");
              } else {
                this.$Message.success("添加成功");
              }                      
              setTimeout(function() {
                self.$router.push({
                  path: "/user/list"
                });
              }, 1500);
            } else {
              this.$Message.error(data.msg);
            }
          });
        } else {
          this.$Message.error("请完善您的用户信息");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
